<template>
	<view class="page">
		<demo-block title="Image 图片">
			<l-painter >
				<l-painter-view>
					<l-painter-text text="基础用法" css="margin-top: 30rpx; display: block; padding-bottom:20rpx; color: #999"/>
					<l-painter-view>
						<l-painter-image
							src="../../static/logo.png"
							css="width: 200rpx; height: 200rpx"
							/>
					</l-painter-view>
				</l-painter-view>
				<l-painter-view>
					<l-painter-text text="填充方式" css=" margin-top: 30rpx; display: block; padding-bottom:20rpx; color: #999"/>
					<l-painter-view css="display: inline-block; padding-right: 12rpx">
						<l-painter-image
							src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"
							css="width: 200rpx; height: 200rpx; object-fit: contain; background: #f5f5f5"
							/>
						<l-painter-text text="contain" css="margin-top: 10rpx; display: block; text-align:center;"/>
					</l-painter-view>
					<l-painter-view css="display: inline-block; padding: 0 12rpx">
						<l-painter-image
							src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"
							css="width: 200rpx; height: 200rpx; object-fit: cover; background: #f5f5f5"
							/>
						<l-painter-text text="cover" css="margin-top: 10rpx; display: block; text-align:center;"/>
					</l-painter-view>
					<l-painter-view css="display: inline-block; padding: 0 12rpx">
						<l-painter-image
							src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"
							css="width: 200rpx; height: 200rpx; object-fit: fill; background: #f5f5f5"
							/>
						<l-painter-text text="fill" css="margin-top: 10rpx; display: block; text-align:center;"/>
					</l-painter-view>
					<l-painter-view css="display: inline-block; margin-top: 30rpx">
						<l-painter-image
							src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"
							css="width: 200rpx; height: 200rpx; object-fit: none; background: #f5f5f5"
							/>
						<l-painter-text text="none" css="margin-top: 10rpx; display: block; text-align:center;"/>
					</l-painter-view>
				</l-painter-view>
			</l-painter>
		</demo-block>
	</view>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue'
export default {
	components: {uniPopup},
	data: () => ({
		picture: '',
		isShowPopup: false,
		isShowPainter: false
	}),
	created() {

	},
	mounted() {
		
	},
	methods: {
		fail(v) {
			console.log(v)
		},
		done(v) {
			console.log('绘制完成')
		},
		// 保存图征
		saveImage() {
			// #ifndef H5
			uni.saveImageToPhotosAlbum({
				filePath: this.picture,
				success(res) {
					uni.showToast({
						title: '已保存到相册',
						icon: 'success',
						duration: 2000
					});
				},
			});
			// #endif
		},
		// 打开弹窗
		open() {
			const popup = this.$refs.popup
			popup.open()
		},
	}
};
</script>

<style lang="stylus" scoped>
.w
	width 100%
	height 300rpx
	position relative
.b 
	position absolute
	left: 180rpx
	top: 18rpx
	background: rgba(#1989fa, 0.5)
	width: 80rpx
	height: 80rpx
	// transform: rotate(50deg)
	// transform-origin: bottom right
.a 
	position absolute
	left: 180rpx
	top: 18rpx
	background: #1989fa
	width: 80rpx
	height: 80rpx
	transform: rotate(50deg)
	transform-origin: 100% 50%
.page
	background #fff
.my-poster-wrap
	width 80vw
	background-color #fff
	border-radius 20rpx
.my-poster
	padding 40rpx 64rpx
.my-poster-header
	display flex
	align-items center
	margin-bottom 36rpx
.my-poster-header__avatar
	height 64rpx
	width 64rpx
	border-radius 50%
	margin-right 16rpx
.my-poster-header__info, .my-poster-header__info-name
	width 136rpx
	height 28rpx
	margin-bottom 12rpx
.my-poster-header__info-tips
	width 172rpx
	height 20rpx
.my-poster-body, .my-poster-body__pic
	height 450rpx
.my-poster-body__price
	height 28rpx
	width 152rpx
	margin-top 24rpx
.my-poster-footer
	margin-top 40rpx
	display flex
.my-poster-footer__title
	flex 1
	margin-right 24rpx
	display flex
	flex-direction column
	justify-content flex-end
.my-poster-footer__title .my-skeleton
	height 28rpx
	margin-top 20rpx
.my-poster-footer__qr
	width 120rpx
	height 120rpx
.my-poster__action
	position fixed
	left 50%
	bottom 40rpx
	transform translateX(-50%)
	z-index 9999997
	height 88rpx
	width 60%
	background linear-gradient(to right, #FF004E, #FF4242)
	color #fff
	display flex
	align-items center
	justify-content center
	border-radius 200rpx
// .my-poster__action-button
// 	display flex
// 	width 100rpx
// 	height 100rpx
// 	background-color #ff7900
// 	border-radius 50%
// 	align-items center
// 	justify-content center
.my-skeleton
	background-color #f2f3f5
.my-skeleton--animate
	animation my-skeleton-blink 1.2s ease-in-out infinite
@keyframes my-skeleton-blink
	50%
		opacity 0.6
</style>
